<template>
  <div>
    <h1>Header---{{count}}</h1>
    <h2>商品的价格是-{{price}}</h2>
    <button @click='addCount'>累加count</button>
    <button @click='addWait'>等一会加</button>
    <button @click='decPrice(101)'>降价</button>
    
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
    name:'Header',
    mounted(){
        console.log(this);
    },
    // 计算属性，目的是得到一个值
    computed:{
        // 方式1
        // count(){
        //     return this.$store.state.count
        // },
        // price(){
        //     return this.$store.state.price
        // }
        // 方式2
        // ...mapState({count:'count',price:'price'}),
        // 方式3
        ...mapState('count',['count','price'])
    },
    methods:{
      // addCount(){
      //   this.$store.commit('count/increment')
      // },
      // decPrice(n){
      //   this.$store.commit('count/decrement',n)
      // }
      ...mapMutations('count',{addCount:'increment',decPrice:'decrement'}),

      addWait(){
        this.$store.dispatch('count/incrementN')
      }

    }
}
</script>

<style>

</style>